<template>
  <div class="time-date-select-container flex-normal">
    <div class="date-item">
      <el-date-picker
        @change="startDateChange"
        v-model="params.startingTime"
        type="date" value-format="yyyy-MM-dd"
        placeholder="选择开始日期">
      </el-date-picker>
    </div>
    <span class="unit">至</span>
    <div class="date-item">
      <el-date-picker
        @change="endDateChange"
        v-model="params.endTime"
        type="date" value-format="yyyy-MM-dd"
        placeholder="选择结束日期">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import {getNowDate, getPassYear} from '@/utils/tools.js'
export default {
  name: 'time-date-select-container',
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          startingTime: getNowDate(),
          endTime: getPassYear()
        }
      }
    }
  },
  watch: {
    value: {
      handler: function(obj){
        if(!obj) return
        this.params = obj
      },
      immediate: true
    },
  },
  data() {
    return {
      params: this.value
    }
  },
  methods: {
    startDateChange(){
      this.$emit('change', this.params)
    },
    endDateChange(){
      this.$emit('change', this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.time-date-select-container{
  .date-item{
    width: vw(240);
  }
  .unit{
    font-size: vh(13);
    color: #3E3E3E;
    margin: 0 vw(15);
  }
}
</style>
